<template>
  <el-card class="margin-top">
    <div slot="header" class="clearfix relative">
      <span class="title-icon"
        >运单信息

        <span style="margin-left:480px;">
          总计票数： {{ total.totalPszie }} 分单数：
          {{ total.totalSzie }} 总件数：{{
            total.inStockTotalPackages
          }}
          总毛重：{{ total.inStockActualWeight }} 总体积：{{
            total.inStockVolume
          }}
        </span>
      </span>

      <el-button
        v-if="pageType == 'seaFreight' && tableDataProp.length > 0"
        type="success"
        size="mini"
        class="header-save-btn"
        @click="changeSeaWaybillInfo"
      >
        {{ isChangeSeaWaybillInfo ? "保存" : "编辑" }}
      </el-button>
      <el-button
        v-if="tableDataProp.length > 0"
        type="primary"
        size="mini"
        icon="el-icon-download"
        class="margin-left"
        @click="exportTable"
      >
        导出运单信息
      </el-button>
    </div>

    <el-table
      class="table-box"
      id="out-eltable"
      :border="true"
      :data="tableDataProp"
      style="width: 100%"
      size="mini"
    >
      <!-- 遍历col -->
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <ex-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :width="columnWidth(column.prop)"
        :auto-fit="true"
        :fit-header="true"
        :prop="column.prop"
        :label="column.label"
        show-overflow-tooltip
      >
        <template slot-scope="scope" class="column-wrapper">
          <span v-if="column.type === 'boolean'">
            {{ scope.row[scope.column.property] ? "是" : "否" }}
          </span>
          <div
            v-else
            class="column-content auto-fit-target"
            :title="scope.row[scope.column.property]"
          >
            <!-- 判断是否为waybillLabel -->
            <div
              v-if="
                scope.column.property === 'waybillLabel' &&
                  isChangeSeaWaybillInfo
              "
            >
              <el-input
                size="mini"
                v-model="scope.row[scope.column.property]"
                clearable
              />
            </div>

            <div
              v-else-if="
                scope.column.property === 'operationId' ||
                  scope.column.property === 'salesmanId' ||
                  scope.column.property === 'servicesId'
              "
            >
              {{ userOptions[scope.row[scope.column.property]] }}
            </div>

            <div v-else-if="scope.column.property === 'waybillSingleId'">
              {{ waybillNOMap[scope.row.waybillSingleId] }}
            </div>
            <div
              v-else-if="
                scope.column.property === 'dispatchAddressCode' &&
                  scope.row.purposeWarehouseType !== 700
              "
            >
              {{ scope.row.dispatchAddressCode }}
            </div>
            <div
              v-else-if="
                scope.column.property === 'dispatchAddressCode' &&
                  scope.row.purposeWarehouseType === 700
              "
            >
              {{ (scope.row.dispatchAddressCode = "") }}
            </div>
            <!-- -->
            <div
              v-else-if="scope.column.property === 'waybillNo'"
              @click="toEdit(scope.row.id)"
              class="text-blue pointer"
            >
              {{ scope.row.waybillNo }}
            </div>
            <div
              v-else-if="scope.column.property === 'recoveManTaxNO'"
              v-html="scope.row.recoveManTaxNO"
            ></div>
            <div
              v-else-if="scope.column.property === 'eoriIsCertified'"
            >
              {{ getImporterStr(scope.row) }}
            </div>
            <span v-else>
              {{ scope.row[scope.column.property] }}
            </span>
          </div>
        </template>
      </ex-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  props: {
    pageType: {
      type: String,
      required: true
    },
    tableData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      userOptions: {},
      isNotOptions: {
        1: "是",
        0: "否"
      },
      total: {},
      tableDataProp: this.tableData,
      waybillNOMap: {},
      isChangeSeaWaybillInfo: false,
      waybillId: "",
      shippingway: "",
      airCloumn: [
        { prop: "waybillSingleNo", label: "分单号" },
        { prop: "waybillNo", label: "运单号" },
        { prop: "isTaxFarming", label: "包税", type: "boolean" },
        { prop: "isCustomerDeclaration", label: "报关", type: "boolean" },
        { prop: "eoriIsCertified", label: "自有进口商" },
        { prop: "dispatchAddressCode", label: "仓库代码" },
        { prop: "salesmanId", label: "销售" },
        { prop: "servicesId", label: "客服" },
        { prop: "operationId", label: "跟单操作" }
      ],
      seaCloumn: [
        { prop: "operationId", label: "跟单操作" },
        { prop: "salesmanId", label: "销售" },
        { prop: "waybillSingleNo", label: "分单号" },
        { prop: "waybillNo", label: "运单号" },
        { prop: "isTaxFarming", label: "包税", type: "boolean" },
        { prop: "isCustomerDeclaration", label: "报关", type: "boolean" },
        { prop: "eoriIsCertified", label: "自有进口商" },
        { prop: "dispatchAddressCode", label: "仓库代码" },
        { prop: "recoveManTaxNO", label: "中文品名" },
        { prop: "inStockTotalPackages", label: "件数" },
        { prop: "inStockActualWeight", label: "重量" },
        { prop: "inStockVolume", label: "体积" },
        { prop: "waybillLabel", label: "标签" },
        { prop: "dispatchZipCode", label: "邮编" }
      ]
    };
  },
  computed: {
    tableColumns() {
      return this.pageType === "seaFreight" ? this.seaCloumn : this.airCloumn;
    }
  },
  mounted() {
    this.waybillId = this.$route.query.waybillId;
    this.shippingway = this.$route.query.shippingway;
    console.info(this.waybillId, this.shippingway);
    this.initWaybillSingle();
    this.initUserOptions("userSource");
  },
  methods: {
    toEdit(id) {
      const url = `#/blank/waybill__alledit__main?waybillId=${id}`;
      window.open(url);
    },
    initUserOptions(bean) {
      var uri = "/api/entry/source?bean=" + bean;
      axios.post(constant.API_SERVER + uri).then(
        response => {
          this.userOptions = response.data;
        },
        error => {
          console.info(error);
        }
      );
    },
    columnWidth(prop) {
      let widthStr = "";
      if (prop === "recoveManTaxNO") {
        widthStr = 160;
      } else if (prop === "operationId") {
        widthStr = 90;
      } else if (prop === "salesmanId") {
        widthStr = 90;
      } else if (prop === "waybillNo") {
        widthStr = 100;
      } else if (prop === "isTaxFarming") {
        widthStr = 80;
      } else if (prop === "isCustomerDeclaration") {
        widthStr = 80;
      } else if (prop === "isVatAndEori") {
        widthStr = 80;
      } else if (prop === "eoriIsCertified") {
        widthStr = 180;
      } else if (prop === "inStockTotalPackages") {
        widthStr = 90;
      } else if (prop === "inStockActualWeight") {
        widthStr = 90;
      } else if (prop === "inStockVolume") {
        widthStr = 90;
      } else if (prop === "dispatchAddressCode") {
        widthStr = 140;
      } else if (prop === "recoveManTaxNO") {
        widthStr = 140;
      } else if (prop === "dispatchZipCode") {
        widthStr = 140;
      }
      return widthStr;
    },
    initWaybillSingle() {
      var param = {};
      param["id"] = this.$route.query.waybillId;
      ajax("initWaybillSingle", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message || "获取数据失败！");
          } else {
            this.tableDataProp = res.data;
            // this.waybillNOMap = res.data2;
            this.total = res.data3;
          }
          this.showdata = true;
        },
        error => {
          console.log(error);
        }
      );
    },

    changeSeaWaybillInfo() {
      if (this.isChangeSeaWaybillInfo) {
        ajax("updateSingleLabel", this.tableDataProp).then(
          res => {
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
              this.isChangeSeaWaybillInfo = false;
            }
            this.showdata = true;
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeSeaWaybillInfo = true;
      }
    },
    // 导出
    exportTable() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-eltable"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "运单信息.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    //自有进口商
    getImporterStr(row) {
      // debugger;
      let importerStr = '';
      if (!row.isTaxFarming) {
        if (row.isJiufangImporter) {
          importerStr = '九方';
        } else {
          importerStr = row.vat;
        }
      }
      return importerStr;
    }
  }
};
</script>

<style></style>
